import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
import { ListItem, Icon, Button } from 'react-native-elements'
import { primaryColor, isPickupOrder, getDirection } from '../utils';

const styles = StyleSheet.create({
  container: {
    padding: 16
  },
  pickup: {
    color: '#4CAF50',
    fontSize: 18
  },
  dropOff: {
    color: '#3F51B5',
    fontSize: 18
  },
  banner: {
    backgroundColor: '#FFF59D',
    padding: 16,
  },
  highLight: {
    color: primaryColor
  },
  row: {
    flexDirection: 'row',
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 16,
    paddingHorizontal: 16
  },
  itemText: {
    marginHorizontal: 16,
    fontSize: 16
  },
  fill: {
    flex: 1,
    justifyContent: 'center'
  },
  quantity: {
    paddingHorizontal: 16,
    paddingTop: 8,
    fontSize: 16
  },
  marginTop: {
    marginTop: 16
  },
  express:{
    color:'red',
  }
})

class OrderListItem extends Component {
  onCollect = () => this.props.onSelect(this.props.order, 'Collect')
  onView = () => {
    if (this.props.order.storages) {
      this.props.onSelect(this.props.order, 'Collect');
    } else {
      this.props.onSelect(this.props.order, 'View');
    }
  }
  onCall = () => {
    this.props.onCall(this.props.order.shipping.contact);
  }
  onDirection = () => {
    getDirection(this.props.order);
  }
  onSms = () => {
    this.props.onSms(this.props.order.id); 
  }
  render() {
    const { displayId, type, status, shipping, payment, pricing, storages, express } = this.props.order;
    const quantity = (pricing.details&&[0,...pricing.details.map(item=>item.quantity)].reduce((a,b)=>a+b))||0;
    const isPickup = shipping.title==='Pickup';
    const needCollectCash = (!isPickup)&&payment.status!=='Paid'&&payment.paymentMethod==='cash';
    return (
      <ListItem title={<Text style={isPickup?styles.pickup:styles.dropOff}>{`${type.toUpperCase()} #${displayId} (${shipping.title}) `}{express?<Text style={styles.express}>[Express]</Text>:null}</Text>}
        onPress={this.onView} subtitle={storages?
          <View>
            <View style={styles.item}>
              <Icon name='access-time' color='gray'/>
              <Text style={styles.itemText}>{shipping.displayDate}</Text>
            </View>
            <View style={styles.item}>
              <Icon name='location-on' color='gray'/>
              <Text style={styles.itemText}>{storages.join(', ')}</Text>
            </View>
            <Button buttonStyle={styles.marginTop} title='COLLECT' backgroundColor='transparent' color={primaryColor} onPress={this.onCollect}/>
          </View>:
          <View>
            <TouchableOpacity onPress={this.onView}>
              {!isPickup&&(payment.status!=='Paid')&&(payment.mode==='Cash')&&
                <Text style={styles.banner}>{`Cash pay, remember to collect from customer: $${pricing.toPayPrice}`}</Text>
              }          
              <View style={styles.item}>
                <Icon name='location-on' color='gray'/>
                <Text style={styles.itemText}>{`${shipping.unitNumber} ${shipping.address} ${shipping.postalCode}`}</Text>
              </View>
              <View style={styles.item}>
                <Icon name='account-circle' color='gray'/>
                <Text style={styles.itemText}><Text>{shipping.contactName} <Text style={styles.highLight}>{(this.props.total>1)&&`(This user has ${this.props.total} order at selected date)`}</Text></Text></Text>
              </View>
              <View style={styles.item}>
                <Icon name='access-time' color='gray'/>
                <Text style={styles.itemText}>{shipping.displayDate}</Text>
              </View>
              {shipping.displayDate&&shipping.displayDate.includes('locker')&&
                <View style={styles.item}>
                  <Icon name='lock-outline' color='gray'/>
                  <Text style={styles.itemText}>Locker password: <Text style={styles.highLight}>{user.contact&&user.contact.slice(user.contact.length-4)}</Text> or <Text style={styles.highLight}>0000</Text></Text>
                </View>
              }
              {needCollectCash&&
                <Text style={styles.banner}>{`Cash payment: Remember to collect $${pricing.toPayPrice} from customer.`}</Text>
              }
              {shipping.note?
                <Text style={styles.banner}>{shipping.note}</Text>:null
              }
              <Text style={styles.quantity}>Order contains {quantity} items</Text>
            </TouchableOpacity>
            <View style={styles.row}>
              <View style={styles.fill}>
                <Button title='MAP' backgroundColor='transparent' color={primaryColor} onPress={this.onDirection}/>
              </View>
              <View style={styles.fill}>
                {this.props.calling?<ActivityIndicator/>:
                  <Button title='CALL' backgroundColor='transparent' color={primaryColor} onPress={this.onCall}/>
                }
              </View>
              <View style={styles.fill}>
                <Button title='SMS' backgroundColor='transparent' color={primaryColor} onPress={this.onSms}/>
              </View>
            </View>
          </View>
        } hideChevron/>
    );
  }
}

OrderListItem.fragments = {
  order: gql`
    fragment OrderListItem on Order {
      id
      displayId
      seriesId
      type
      express
      status {
        statusId
        displayStatus
      }
      pricing {
        toPayPrice
        details {
          quantity
        }
      }
      shipping {
        title
        displayDate
        contact
        contactName
        address
        unitNumber
        postalCode
        note
      }
      payment {
        status
        mode
        paymentMethod
      }
      storages
    }
  `
}

export default OrderListItem;
